<template>
  <div class="dialog dialog-23 dialog-dom" :class="dialogCurrent === 1 ? 'all' : ''">
    <div ref="dialog4" class="dialogs" @click.native="moveNext">
      <template v-for="(item, index) in dialogs.dialog23">
        <div v-if="dialogCurrent === index && item.type === 'dialog'" :key="index" class="animated fadeIn" :class="item.class + ' dialog' + (index + 1)">
          <span>{{item.content}}</span>
        </div>
        <div
          v-else-if="dialogCurrent === index && item.type === 'action'"
          :key="index"
          :class="item.class + ' dialog' + (index + 1)"
        >
          <div >
            <div class="animated fadeInUp">
              <!-- <div class=""> -->
              <img src="../assets/shanziwenzi.png" alt>
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import dialogs from '../dialogs'

export default {
  name: 'HelloWorld',
  props: ['dialogCurrent'],
  data () {
    return {
      dialogs,
    }
  },
  watch: {
    dialogCurrent (val) {
      console.log('dialogCurrentWatch', val, dialogs.dialog23 )
      if (val > dialogs.dialog23.length - 1) {
        this.$emit('move-next')
      }
    }
  },
  methods: {
    moveNext(e) {
      e.preventDefault()
      console.log('moveNext')
      this.$emit('move-next')
    }
  }
}
</script>

<style lang="less" scoped>
.dialog-23 {
  .dialog1 {
    top: 1.6rem;
    left: .4rem;
    width: 1.4rem;
  }
  .dialog2 {
    background: transparent;
    width: 3.2rem;
    height: 2rem;
    top: 2.2rem;
    left: 0.1rem;
  }
  .dialog3 {
    top: 2.27rem;
    left: 1.6rem;
    width: 0.9rem;
  }
  .dialog4 {
    width: 1.7rem;
    top: 3.38rem;
    left: 0.17rem;
  }
}
.all  {
	position:relative;
	max-width:100vw;
  min-height: 100vh;
  width: 100vw;
	background:hsla(0,0%,100%,.4) border-box;
	overflow:hidden;
	border-radius:.3em;
	box-shadow:0 0 0 1px hsla(0,0%,100%,.3) inset,0 .5em 1em rgba(0,0,0,0.6);
  text-shadow:0 1px 1px hsla(0,0%,100%,.3);
}
</style>

